define('common:widget/ui/ai/levelSlider/levelSlider', function(require, exports, module) {

  /**
   * @file 相似度滑动组件
   * @author fangxiaoyu01
   */
  
  var san = require('common:widget/ui/ai/san');
  var originalUserSelect = document.body.style.userSelect;
  
  // 定义滑动条组件
  return san.defineComponent({
      template: ''
          + '<div class="slider">'
          + '    <div class="ai-tool-title {{isAiTip ? \'ai-tip-text\' : \'\'}}">{{tipText}}</div>'
          + '    <div class="slider-divider"></div>'
          + '    <div class="slider-content"'
          + '         style="{{showLabel ? \'margin-top:46px\' : \'\'}}" '
          + '    >'
          + '        <div s-if="title" class="slider-title">'
          + '            <div>{{title}}</div>'
          + '        </div>'
          + '        <div class="slider-container '
          + '            {{disabled && \'slider-container-disabled\'}}"'
          + '        >'
          + '            <div '
          + '                s-ref="track"'
          + '                class="slider-track"'
          + '                on-mousedown="handleTrackMouseDown"'
          + '                on-mouseup="handleTrackMouseup"'
          + '            >'
          + '            </div>'
          + '            <div class="slider-progress" style="{{ progressStyle }}"></div>'
          + '            <div'
          + '                 s-ref="sliderThumb"'
          + '                 class="slider-thumb"'
          + '                 style="{{ thumbStyle }}"'
          + '                 on-mouseup="handleThumbMouseUp"'
          + '                 on-mouseleave="handleThumbMouseUp"'
          + '                 on-mousedown="handleMouseDown">'
          + '            </div>'
          + '            <div s-if="showLabel"'
          + '                 class="slider-label '
          + '                 {{ defaultStep === 1 ? \'slider-label-left\' : \'\' }}'
          + '                 {{ defaultStep === 6 ? \'slider-label-right\' : \'\' }}"'
          + '                 style="{{ labelStyle }}">推荐</div>'
          + '            <div class="slider-step '
          + '                 {{currentStepIndex >= index ? \'slider-step-in-progress\' : \'\'}}" '
          + '                 s-for="step, index in steps"'
          + '                 s-if="showStep"'
          + '                 on-click="moveToStep(step)"'
          + '                 on-mouseenter="handleMouseEnter(step)"'
          + '                 style="{{ \'left:\' + (index * (100 / (steps.length - 1))) + \'%\' }}">'
          + '            </div>'
          + '        </div>'
          + '    </div>'
          + '    <div s-if="directionText" '
          + '         class="slider-text {{disabled && \'slider-container-disabled\'}}">'
          + '        <span>{{directionText.left}}</span>'
          + '        <span>{{directionText.right}}</span>'
          + '    </div>'
          + '</div>',
      initData() {
          return {
              // 6个节点
              steps: [1, 2, 3, 4, 5, 6],
              // 新增一个标志，表示滑块位置是否已初始化，防止闪动
              isInitialized: false,
              // 初始化滑块的左偏移量
              thumbLeft: -1,
              // 标签默认值
              defaultStep: 5,
              // 控制标签是否显示
              showLabel: true,
              // 初始化标签的左偏移量
              labelLeft: 0,
              // 禁用态（生成时需要禁用全部的操作）
              disabled: false,
              // 当前步骤
              currentStepIndex: 4,
              // 是否显示步骤节点
              showStep: true,
              tipText: '',
              directionText: null,
              title: '',
              min: 0,
              max: 1,
              defaultValue: 0,
              sliderWidth: 0,
              isAiTip: false
          };
      },
      // 默认值为5
      currentStep: 5,
      dragging: false,
      // 拖动开始时的鼠标位置
      initialX: 0,
      // 滑块的偏移量
      offsetX: 0,
      // 滑动条的宽度
      sliderWidth: 0,
      // 滑块的宽度
      thumbWidth: 0,
      // 是否点击了进度条
      trackClick: false,
      computed: {
          progressStyle() {
              var thumbLeft = this.data.get('thumbLeft');
              return 'width: ' + thumbLeft + 'px;';
          },
          thumbStyle() {
              if (!this.data.get('isInitialized')) {
  
                  // 如果未初始化，隐藏滑块
                  return 'display: none;';
              }
              var thumbLeft = this.data.get('thumbLeft');
              return 'left: ' + thumbLeft + 'px;';
          },
          labelStyle() {
              var defaultStep = this.data.get('defaultStep');
              if (defaultStep === 1 || defaultStep === 6) {
                  return;
              }
              var labelLeft = this.data.get('labelLeft');
              return labelLeft === 0 ? {
                  visibility: 'hidden'
              } : {
                  left: labelLeft + 'px',
                  visibility: 'visible'
              };
          },
          value() {
              var thumbLeft = this.data.get('thumbLeft');
              var sliderWidth = this.data.get('sliderWidth');
              var min = this.data.get('min');
              var max = this.data.get('max');
              return Math.round(min + (max - min) * (thumbLeft / sliderWidth));
          }
      },
      attached() {
          // 初始化滑动条和滑块的宽度
          this.sliderWidth = this.ref('track').clientWidth;
          this.data.set('sliderWidth', this.ref('track').clientWidth);
          var thumb = this.ref('sliderThumb');
          this.thumbWidth = thumb.clientWidth;
  
          this.reset();
          this.data.set('isInitialized', true);
  
          // 如果需要显示标签，计算其位置
          if (this.data.get('showLabel')) {
              this.data.set('labelLeft', this.calculateLabelPosition());
          }
  
          // 绑定事件处理函数
          this.boundHandleMouseMove = this.handleMouseMove.bind(this);
          this.boundHandleMouseUp = this.handleMouseUp.bind(this);
  
      },
      handleMouseDown(e) {
          if (this.data.get('disabled')) {
              return;
          }
          var thumb = this.ref('sliderThumb');
          thumb.classList.add('slider-thumb-dragging');
          if (e.target !== thumb) {
  
              // 如果鼠标不是在滑块上按下，不执行后续操作
              return;
          }
  
          // 标记开始拖动
          this.dragging = true;
  
          // 记录鼠标按下时的初始位置
          this.initialX = e.clientX - thumb.offsetLeft;
          this.fire('slider-mousedown');
  
          e.preventDefault();
  
          // 禁用页面上所有元素的文本选择功能
          document.body.style.userSelect = 'none';
  
          // 绑定 mousemove 和 mouseup 事件
          document.addEventListener('mousemove', this.boundHandleMouseMove);
          document.addEventListener('mouseup', this.boundHandleMouseUp);
      },
  
      handleMouseMove(e) {
          if (!this.dragging) {
              return;
          }
  
          // 计算新的偏移量
          var newOffsetX = e.clientX - this.initialX;
          var leftLimit = 0;
          var rightLimit = this.sliderWidth - this.thumbWidth;
  
          // 限制滑块的移动范围
          var limitedOffsetX = Math.max(leftLimit, Math.min(rightLimit, newOffsetX));
  
          // 更新滑块的位置
          this.data.set('thumbLeft', limitedOffsetX);
          var stepWidth = this.sliderWidth / (this.data.get('steps').length - 1);
          var step = Math.floor(limitedOffsetX / stepWidth) + 1;
          var index = this.data.get('steps').indexOf(step);
          this.data.set('currentStepIndex', index);
  
          if (!this.data.get('showStep')) {
              this.fire('slider-mousemove', this.data.get('value'));
          }
      },
  
      handleMouseUp() {
  
          // 标记结束拖动
          this.dragging = false;
  
          var thumb = this.ref('sliderThumb');
          thumb.classList.remove('slider-thumb-dragging');
          this.fire('slider-mouseup');
  
          // 移除 mousemove 和 mouseup 事件
          document.removeEventListener('mousemove', this.boundHandleMouseMove);
          document.removeEventListener('mouseup', this.boundHandleMouseUp);
  
          // 恢复文本选择功能，使用保存的原始 userSelect 值
          document.body.style.userSelect = originalUserSelect;
  
           // 清除页面上的任何已有文本选择
          if (window.getSelection) {
              window.getSelection().removeAllRanges();
          } else if (document.selection) {
              document.selection.empty();
          }
  
          // 吸附到最近的节点
          if (this.data.get('showStep')) {
              this.snapToNearestStep();
          }
      },
  
      updatePositionByOffset(offsetX) {
  
          // 根据偏移量更新滑块的位置
          var stepWidth = this.sliderWidth / (this.data.get('steps').length - 1);
          var currentStep = Math.round(offsetX / stepWidth);
          this.currentStep = currentStep;
          this.updateThumbPosition();
      },
  
      snapToNearestStep() {
          var thumbLeft = this.data.get('thumbLeft');
          var stepWidth = this.sliderWidth / (this.data.get('steps').length - 1);
  
          // 根据滑块的左偏移量计算最近的步骤
          var nearestStepIndex = Math.round(thumbLeft / stepWidth);
  
          // 更新当前步骤
          this.currentStep = nearestStepIndex;
  
          // 更新滑块的位置到最近的步骤
          var newThumbLeft = stepWidth * nearestStepIndex;
          this.data.set('thumbLeft', newThumbLeft);
  
          // 同时更新进度条的宽度
          this.data.set('progressStyle', 'width: ' + newThumbLeft + 'px;');
          this.fire('change', this.data.get('steps')[nearestStepIndex]);
      },
  
      updateThumbPosition() {
  
          // 根据当前步骤计算滑块的位置
          var stepWidth = this.sliderWidth / (this.data.get('steps').length - 1);
          var thumbLeft = stepWidth * (this.currentStep - 1);
          this.data.set('thumbLeft', thumbLeft);
  
          // 同时更新进度条的宽度
          this.data.set('progressStyle', 'width: ' + thumbLeft + 'px;');
      },
  
      moveToStep(step) {
          if (this.data.get('disabled')) {
              return;
          }
          var stepIndex = this.data.get('steps').indexOf(step);
          var stepWidth = this.sliderWidth / (this.data.get('steps').length - 1);
  
          // 更新当前步骤
          this.currentStep = stepIndex;
          this.data.set('currentStepIndex', stepIndex);
  
          // 更新滑块的位置和进度条的宽度
          var newThumbLeft = stepWidth * stepIndex;
          this.data.set('thumbLeft', newThumbLeft);
          this.data.set('progressStyle', 'width: ' + newThumbLeft + 'px;');
  
          // 触发 'change' 事件，传递当前步骤的值
          this.fire('change', step);
      },
      calculateLabelPosition() {
  
          // 只有在需要显示标签时才计算位置
          var defaultStep = this.data.get('defaultStep');
          var steps = this.data.get('steps');
          var stepWidth = this.sliderWidth / (steps.length - 1);
          return (stepWidth * (defaultStep - 1)) - 20;
      },
      handleTrackMouseDown(e) {
          this.trackClick = true;
          var clickPosition = e.clientX - this.ref('track').getBoundingClientRect().left;
          var showStep = this.data.get('showStep');
          var stepWidth = this.sliderWidth / (this.data.get('steps').length - 1);
          var stepIndex = Math.floor(clickPosition / stepWidth);
          this.data.set('currentStepIndex', stepIndex);
          this.data.set('thumbLeft', clickPosition);
          if (!showStep) {
              this.fire('change', this.data.get('value'));
          }
      },
      handleThumbMouseUp() {
          if (!this.data.get('showStep') || !this.trackClick) {
              return;
          }
          this.trackClick = false;
          var thumbLeft = this.data.get('thumbLeft');
          var stepWidth = this.sliderWidth / (this.data.get('steps').length - 1);
          var stepIndex = Math.round(thumbLeft / stepWidth) + 1;
          this.moveToStep(stepIndex);
      },
      handleMouseEnter(step) {
          this.fire('step-hover', step);
      },
      reset() {
          var defaultStep = this.data.get('defaultStep');
          this.currentStep = defaultStep;
          var defaultValue = this.data.get('defaultValue');
          var showStep = this.data.get('showStep');
          var max = this.data.get('max');
          var min = this.data.get('min');
  
          // 设置滑块的初始位置
          if (!showStep && defaultValue <= max && defaultValue >= min) {
              var thumbLeft = this.sliderWidth * (defaultValue - min) / max;
              this.data.set('thumbLeft', thumbLeft);
          }
          else {
              this.updateThumbPosition();
          }
      }
  });
  

});
